<!-- 

  array有哪操作
  1、遍历：    看 `02-计算属性复杂使用.html`
  2、增删改查： 

  1、 push
  2、 pop
  3、 shift
  4、 unshift
  5、 splice
  6、 sort
  7、 reverse

  Vue.set(arrar, start, length, item0....itemx);
  start 开始下标
  length 从下标开始的长度，进行替换
  item0...itemx 具体可多个值，去进行去替换
-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <ul v-for="item in letters">
      <li>{{item}}</li>
    </ul>
    <button @click='btnClick'>按钮</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'b', 'e', 'f', 'c', 'd']
      },
      methods: {
        btnClick: function() {
          let arr = this.letters;
          // 1. push
          // this.letters.push('aa');
          // this.letters.push('aa', 'bb', 11);

          // 2. pop 删除最后一个元素 -----------------------
          // this.letters.pop();

          // 3. shift  删除第一个元素 -----------------------
          // this.letters.shift();

          // 4. unshift: 在数组最前面添加元素 -----------------------
          // this.letters.unshift('bbb');
          // this.letters.unshift('bbb', 'ccc', 999);

          // 5. splice -----------------------
          // this.letters.splice(index, howmany, item1....itemx)
          // this.letters.splice(0, 1, 'ffff'); //结果 'a'变成 'ffff'
          // this.letters.splice(0, 2, 'ffff'); //结果 'a'和'b' 变成 'ffff'
          // this.letters.splice(1, 1, 'ffff');
          // this.letters.splice(1, 2, 'ffff');
              // 特殊情况(当删除所有，需要返回值) -=`-=`-=`-=`=-=`
              // 1
              // arr = arr.splice(); //删除所有
              // this.letters = arr;
              // 2
              // this.letters = this.letters.splice()

          // this.letters.splice(1, this.letters.length-1, '')

          // 1 插入
          // this.letters.splice(1, 0, 'ooo', 'ppp')

                  // ------ 1. 如果使用下标改变, Vue 是不会刷新的 -=`-=`-=`-=`=-=`
                  // this.letters[0] = 'baccc';
                  // ----- 2.(1) 使用 splice,是可以的
                  // this.letters.splice(0,1, 'baccc');
                  // ----- 2.(2) 使用 Vue 内部实现的 set -=`-=`-=`-=`=-=`
                  // Vue.set(this.letters, 0, 'baccc')



          // 6. sort 排序-快速-正向 (可 写/无 返回值，都是一样的) -----------------------
          // this.letters.sort()

          //当第一个执行后， arr都不需要再次去执行sort了，已经变了
          // this.letters.sort()
          // // arr = arr.sort();

          // 7. reverse 倒叙 -----------------------
          // this.letters.reverse()

          // 8. split 分割字符串 -----------------------
          // this.letters.push(this.letters.join('.'))


        }
      }
    })
  </script>
</body>
</html>